<template>
	<div class="classify-goods">
		<back-header>分类商品</back-header>
		<div class="classify-goods-main">
			<div class="classify-goods-main-list">
				<recommend-item v-for="item in showList" :key="item.id" :recommendItem="item"/>
			</div>
			<div class="classify-goods-empty" v-if="showList.length===0">
				<img src="../assets/img/goods_empty.png" alt="">
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	import recommendItem from '#/Public/RecommendItem';
	import backHeader from '#/Public/backHeader';

	export default {
		name: "classify-goods",
		computed: {
			...mapState(['recommendList']),
			showList() {
				return this.recommendList.filter(item => item.categoryId === this.$route.params.id * 1);
			}
		},
		components: {
			recommendItem,
			backHeader
		}
	}
</script>
